<template>
  <div class="auto select-overspread">
    <validator name='v'>
      <ul class="nav nav-tabs" >
        <li role="presentation" class="active"><a href="#">调压箱信息</a></li>
      </ul>
      <form class="form-horizontal" style="margin-top:20px;flex: 1;">
        <div class="row">
          <div class="col-sm-4 form-group form-input-group"  :class="[$v.f_adjustable_id.required || $v.f_adjustable_id.minlength || $v.f_adjustable_id.maxlength ? 'has-error' : '']">
            <label for="f_adjustable_id" class="control-label">编号</label>
            <input type="number"  v-model="model.f_adjustable_id" @blur= "changeid()" v-validate:f_adjustable_id='{required: true,minlength: 5,maxlength: 5 }' class="form-control" placeholder="编号" v-next-el="name">
          </div>

          <div class="col-sm-4 form-group form-input-group"   :class="[$v.f_adjustable_name.required ? 'has-error' : '']">
            <label for="f_adjustable_name" class="control-label">名称</label>
            <input type="text"  v-model="model.f_adjustable_name" @blur= "changename()" v-validate:f_adjustable_name="{required: true }" class="form-control" placeholder="名称" v-el:name v-next-el="address">
          </div>

          <div class="col-sm-4 form-group form-input-group"  :class="[$v.f_adjustable_address.required ? 'has-error' : '']">
            <label for="f_area" class="control-label">地址</label>
            <input type="text" v-model="model.f_adjustable_address" v-validate:f_adjustable_address='{required: true }'
            class="form-control" placeholder="地址" v-el:type v-next-el="street" >
          </div>
        </div>
        <div class="row" style = "color:red;text-align:center " >
          <div class="col-sm-4 ">
            <span v-if="haveid === true">编号重复</span>
          </div>
          <div class="col-sm-4 ">
            <span v-if="havename === true">名称重复</span>
          </div>
        </div>
        <div class="row">
          <!-- <div class="col-sm-4 form-group form-input-group" :class="[$v.f_adjustable_type.required ? 'has-error' : '']">
            <label for="f_adjustable_type" class="control-label">装置类型</label>
            <v-select :value.sync="model.f_adjustable_type" v-model="model.f_adjustable_type"
                :options='adjustabletype' placeholder='装置类型'
            close-on-select></v-select>
          </div> -->
          <div class="col-sm-4 form-group form-input-group" >
            <label for="f_adjustable_type" class="control-label">装置类型</label>
            <div class="" :class="[$v.adjustable_type.required ? 'select-error' : '']">
              <input type="text" v-show="false" v-model="$refs.adjustable_type.selectedItems" v-validate:adjustable_type='{required: true }'>
              <v-select :value.sync="model.f_adjustable_type" :options='adjustabletype'  placeholder='装置类型' close-on-select
              v-model='model.f_adjustable_type' v-ref:adjustable_type></v-select>
            </div>
          </div>
          <!-- <div class="col-sm-4 form-group form-input-group" :class="[$v.f_adjustable_style.required ? 'has-error' : '']">
            <label for="f_adjustable_style" class="control-label">型号</label>
            <v-select :value.sync="model.f_adjustable_style" v-model="model.f_adjustable_style"
                :options='adjustablestyle' placeholder='型号'
            close-on-select></v-select>
          </div> -->
          <div class="col-sm-4 form-group form-input-group" :class="[$v.f_adjustable_style.required ? 'has-error' : '']">
            <label for="f_adjustable_style" class="control-label">型号</label>
            <!-- <div class="" :class="[$v.adjustable_style.required ? 'select-error' : '']"> -->
              <!-- <input type="text" v-show="false" v-model="$refs.adjustable_style.selectedItems" v-validate:adjustable_style='{required: true }'>
              <v-select :value.sync="model.f_adjustable_style" :options='adjustablestyle'  placeholder='调压箱型号' close-on-select
              v-model='model.f_adjustable_style' v-ref:adjustable_style></v-select> -->
            <input type="text" v-model="model.f_adjustable_style" v-validate:f_adjustable_style='{required: true }' class="form-control" placeholder="调压箱型号" >
            <!-- </div> -->
          </div>

          <div class="col-sm-4 form-group form-input-group"  >
            <label for="f_in_pipe" class="control-label">进口管径 </label>
            <input type="text" v-model="model.f_in_pipe"
            class="form-control" placeholder="进口管径" v-el:inpipe v-next-el="outpipe">
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4 form-group form-input-group" >
            <label for="f_out_pipe" class="control-label">出口管径</label>
            <input type="text"  v-model="model.f_out_pipe" class="form-control" placeholder="出口管径" v-el:outpipe v-next-el="date">
          </div>

          <div class="col-sm-4 form-group form-input-group"  >
            <label for="f_operate_date" class="control-label">安装日期</label>
            <datepicker  placeholder="安装日期"
              v-model="model.f_operate_date"
              :value.sync="model.f_operate_date"
              :format="'yyyy-MM-dd HH:mm:ss'"
              v-el:date  :disabled= "!changedate"
              v-next-el="openDate"
              >
            </datepicker>
          </div>
          <div class="col-sm-4 form-group form-input-group" >
            <label for="f_manufacturer" class="control-label">生产厂家</label>
            <div class="" :class="[$v.facturer.required ? 'select-error' : '']">
              <input type="text" v-show="false" v-model="$refs.facturer.selectedItems" v-validate:facturer='{required: true }'>
              <v-select :value.sync="model.f_manufacturer" :options='manufacturer'  placeholder='生产厂家' close-on-select
              v-model='model.f_manufacturer' v-ref:facturer></v-select>
            </div>
          </div>
          <!-- <div class="col-sm-4 form-group form-input-group" >
            <label for="f_manufacturer" class="control-label">生产厂家</label>
            <v-select :value.sync="model.f_manufacturer" v-model="model.f_manufacturer"
                :options='manufacturer' placeholder='生产厂家'
            close-on-select></v-select>
          </div> -->

        </div>
        <div class="row">
          <div class="col-sm-4 form-group form-input-group" >
            <label for="f_open_date" class="control-label">启用日期</label>
            <datepicker  placeholder="启用日期"
              v-model="model.f_open_date"
              :value.sync="model.f_open_date"
              :format="'yyyy-MM-dd HH:mm:ss'"
              v-el:openDate
              v-next-el="remark">
            </datepicker>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-12 form-group form-input-group">
            <label for="f_remark" class="control-label">备注</label>
            <textarea class="form-control" v-model="model.f_remark"  rows="3" placeholder="备注"  v-el:remark ></textarea>
          </div>
        </div>
      </form>
      <div style="text-align:right;height:auto;margin-top:30px;margin-right:50px;">
        <button class="btn btn-success " @click="confirm()" :disabled='!$v.valid || haveid || havaname' style="width:80px;margin-left:20px;" id="userfiles-adjTabBox-确认">保&nbsp;&nbsp;&nbsp;存</button>
        <button class="btn btn-default " @click="cancel()" style="width:80px;margin-left:20px;" id="userfiles-adjTabBox-取消">取&nbsp;&nbsp;&nbsp;消</button>
      </div>
    </validator>
  </div>
</template>
<script>
import AppData from '../../../stores/AppData'
import * as Util from '../../Util'

export default {
  data () {
    return {
      model: {
        f_adjustable_id: '',
        f_adjustable_name: '',
        f_adjustable_address: '',
        f_adjustable_type: '',
        f_adjustable_style: '',
        f_in_pipe: '',
        f_out_pipe: '',
        f_operate_date: '',
        f_open_date: '',
        f_manufacturer: '',
        f_remark: ''
      },
      haveid: false,
      havename: false,
      changedate: true
    }
  },
  props: ['data'],
  watch: {
    'data' (val) {
      this.datatomodel()
    }
  },
  ready () {
    console.log(Util.toStandardTimeString())
    this.datatomodel()
  },
  methods: {
    confirm () {
      if (this.haveid === true || this.havename === true) {
        return
      }
      this.model.f_adjustable_id = `${this.model.f_adjustable_id}`
      this.model.f_adjustable_state = '正常'
      this.model.f_operator = Util.f.name
      this.model.f_adjustable_type = this.model.f_adjustable_type[0] ? this.model.f_adjustable_type[0] : ''
      // this.model.f_adjustable_style = this.model.f_adjustable_style[0] ? this.model.f_adjustable_style[0] : ''
      this.model.f_manufacturer = this.model.f_manufacturer[0] ? this.model.f_manufacturer[0] : ''

      this.$resetpost('rs/entity/t_adjustablebox', this.model, {resolveMsg: '调压箱保存成功。', rejectMsg: '保存失败!!!'})
      .then(
        (res) => {
          this.$dispatch('success', '调压箱保存成功', this.model, res)
        }
      ).catch(
        (error) => {
          this.$dispatch('error', '调压箱保存失败', this.model, error)
        }
      )
    },
    datatomodel () {
      this.$nextTick(() => {
        if (JSON.stringify(this.data) === '{}') {
          Object.assign(this.$data.model, this.$options.data().model)
          delete this.model.id
          this.model.f_in_pipe = 'DN'
          this.model.f_out_pipe = 'DN'
          this.changedate = true
          this.model.f_operate_date = Util.toStandardTimeString()
          this.model.f_open_date = Util.toStandardTimeString()
        } else {
          this.model = Object.assign(this.model, {}, this.data)
          this.model.f_adjustable_type = this.model.f_adjustable_type ? [this.model.f_adjustable_type] : ''
          this.model.f_manufacturer = this.model.f_manufacturer ? [this.model.f_manufacturer] : ''
          // this.model.f_adjustable_style = this.model.f_adjustable_style ? [this.model.f_adjustable_style] : ''
          this.model.f_operate_date ? this.changedate = false : this.changedate = true
          // this.model.f_open_date ? Util.parse3339String(this.model.f_open_date) : Util.toStandardDateString()
        }
      })
    },
    cancel () {
      this.$dispatch('close')
    },
    modify () {
      this.model = Object.assign({}, this.gasmessage)
      this.model.f_meter_type = this.model.f_meter_type[0]
      this.getArrParam()
      this.transfer()
      this.data = {}
    },
    changeid () {
      this.$resetpost('rs/sql/singleTable', {data: {tablename: 't_adjustablebox', condition: `f_adjustable_id = '${this.model.f_adjustable_id}'`}}, {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        res.data.length > 0 ? this.haveid = true : this.haveid = false
      })
    },
    changename () {
      this.$resetpost('rs/sql/singleTable', {data: {tablename: 't_adjustablebox', condition: `f_adjustable_name = '${this.model.f_adjustable_name}'`}}, {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        res.data.length > 0 ? this.havename = true : this.havename = false
      })
    }
  },
  computed: {
    adjustabletype () {
      return AppData.getParam('调压装置类型')
    },
    manufacturer () {
      return AppData.getParam('生产厂家')
    },
    adjustablestyle () {
      return AppData.getParam('调压箱型号')
    }
  }
}
</script>
